<template>

    <div>
        
        <div :style="{ backgroundImage: `url(${backgroundImageUrl})` }" class="monitor-container" >
            
            <template v-if="currentWorkEqList.length>0">

                <a-popover  :title="eq.deviceName" trigger="hover" v-for="(eq,i) in currentWorkEqList" :key="i">
                    <template slot="content" v-if="eq.deviceType===defaultSettings.常量.设备类型_温湿度">
                       
                        <a-row>
                                
                            <img src="../img/wendu.png" style="width:20px;" />
                            <span style="font-weight: 500;">{{eq.deviceTemperature}}°C</span>
                        
                            <img src="../img/shidu.png" style="width:20px;" />
                            <span style="font-weight: 500;">{{eq.deviceHumidity}}%</span>
                            <img v-if="eq.alarmState===defaultSettings.常量.是" src="../img/baojing.png" style="width:30px;padding-left:10px;margin-top:-6px;"/>

                          
                        </a-row>
                         <a-row>
                            <img src="../img/bianhao.png" style="width:16px">
                            <span style="height:16px;line-height:16px;margin-left:6px;color:#707070;">{{eq.deviceNo}}</span>
                        </a-row>
                    </template>
                    <template slot="content" v-else>
                        <a-row>
                            <img src="../img/bianhao.png" style="width:16px">
                            <span style="height:16px;line-height:16px;margin-left:6px;color:#707070;">{{eq.deviceNo}}</span>
                        </a-row>
                    </template>


                    <template v-if="eq.deviceType===defaultSettings.常量.设备类型_温湿度">
                        <div v-if="eq.lineState===defaultSettings.常量.否" :class='["icon","th-off"]' :style="{left: `${eq.pageLeft}%`,top: `${eq.pageTop}%`}"></div>
                        <div v-else-if="eq.alarmState===defaultSettings.常量.是" :class='["icon","th-alarm"]' :style="{left: `${eq.pageLeft}%`,top: `${eq.pageTop}%`}"></div>
                        <div v-else :class='["icon","th-normal"]' :style="{left: `${eq.pageLeft}%`,top: `${eq.pageTop}%`}"></div>
                    </template>
                    <template v-else>
                         <div v-if="eq.lineState===defaultSettings.常量.否" :class='["icon","smoke-off"]' :style="{left: `${eq.pageLeft}%`,top: `${eq.pageTop}%`}"></div>
                        <div v-else-if="eq.alarmState===defaultSettings.常量.是" :class='["icon","smoke-alarm"]' :style="{left: `${eq.pageLeft}%`,top: `${eq.pageTop}%`}"></div>
                        <div v-else :class='["icon","smoke-normal"]' :style="{left: `${eq.pageLeft}%`,top: `${eq.pageTop}%`}"></div>
                    </template>
                    
                </a-popover>
            </template>

            
        </div>

    <!-- 固定在右侧中间的图标 -->
        <a-dropdown class="fixed-icon">
        
            <a-menu slot="overlay" @click="changeWork">
                <a-menu-item v-for="(item,i) in workList" :key="i">
                    <a href="javascript:;">{{item.name}}</a>
                </a-menu-item>
                
            </a-menu>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">更换车间<a-icon type="down" /></a>
        </a-dropdown>
        
    </div>


    
</template>

<script>
import * as echarts from 'echarts'
import 'video.js/dist/video-js.css'
import "videojs-contrib-hls"
import notification from 'ant-design-vue/es/notification'
import request from '@/utils/request'
import defaultSettings from '@/config/defaultSettings'
import vueSeamlessScroll from 'vue-seamless-scroll'
import screenfull from "screenfull";
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { forIn } from 'lodash'

export default {
    name: 'Workplace',
    components: {
        vueSeamlessScroll
    },
    beforeCreate() {
    //   document.querySelector('body').setAttribute('style', 'background-color:#11192e')
    },
 
    beforeDestroy() {
    //    document.querySelector('body').removeAttribute('style')
    },

    data () {
        return {
            defaultSettings,
            isFullscreen: false,
            token:null,
            eqStateList:[],//所有终端实时信息
            currentWorkEqList:[],//当前车间终端实时信息
            timmer:null,
            currentWorkCode:'2',
            backgroundImageUrl:require('./img/work2.jpg'),
            workList:[{code:'2',name:'精整车间'},{code:'1',name:'冷轧二车间'}],

           
        }
    },
    // 监听属性 
    computed: {
        

    },
    created () {
       this.token=sessionStorage.getItem(ACCESS_TOKEN)
    },
    mounted () {
        let that = this

        that.$nextTick(() => {
            that.createEqIcon()
            if (screenfull.isEnabled) {
                screenfull.on('change', this.fullChange)
            }
        })
    },
    destroy () {
        if (screenfull.isEnabled) {
            screenfull.off('change', this.fullChange)
        }
    },
    methods: {
        fullChange (){
            this.isFullscreen = screenfull.isFullscreen
        },
        //全屏
        fullScreen () {
            if (!screenfull.isEnabled) {
                return false
            }
            //全屏
            screenfull.toggle();
        },
       //查询数据
       async query(){
        await request({url: '/ThEqStateController/viewList',method: 'post',data: {}}).then((res)=>{
            if(res.success){
                this.eqStateList=res.result
            }else{
                this.$message.warning(res.message);
            }
        })
       },
       //画设备图标
       async createEqIcon(){
        this.eqStateList = this.$store.state.eqState.eqStateList
        if(this.eqStateList.length==0){
            console.log("主动查询")
            await this.query()
            console.log("主动查询完成")
        }
        // console.log(this.eqStateList)
        this.currentWorkEqList=[]
        for(const eq of this.eqStateList){
            if(eq['deviceRegion']===this.currentWorkCode && eq["pageLeft"] && eq["pageTop"]){
                this.currentWorkEqList.push(eq)
            }
        }
        
        // console.log(this.currentWorkEqList)
        if(this.timmer){
            clearTimeout(this.timmer)
        }
        this.timmer = setTimeout(() => {this.createEqIcon()}, 30000)
        
       },
       //更改车间
       changeWork(e){
        this.currentWorkCode = this.workList[e.key].code
        //改变背景图
        this.backgroundImageUrl = require(`./img/work${this.currentWorkCode}.png`)
        this.createEqIcon()
       }
      
       
    }
}
</script>


<style lang="less" scoped> 
   
   .monitor-container {
        position: relative;
        
        width: 100%;    /* 100% 视口宽度 */
        height: 90vh;   /* 100% 视口高度 */
        overflow: auto;
        // background-image: url('./img/work0.png');
        background-size: cover; /* 背景图覆盖整个div */
        background-position: center; /* 背景图居中显示 */
        background-repeat: no-repeat;
    }

/* 固定图标样式 */
    .fixed-icon {
        position: fixed;
        right: 30px;
        top: 14%;
        transform: translateY(-50%);
        z-index: 999;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pulse 2s infinite;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .fixed-icon:hover {
        transform: translateY(-50%) scale(1.1);
    }


    .icon{
        width: 24px;
        height: 24px;
        background-size: cover; /* 背景图覆盖整个div */
        background-position: center; /* 背景图居中显示 */
        transform: translate(-50%, -50%);
        cursor: pointer;
        transition: transform 0.3s ease;
        position:absolute
    }

    .icon:hover {
        transform: translate(-50%, -50%) scale(1.15);
    }

    .icon.smoke-normal{
        background-image: url('./img/smoke-normal.png');
    }

    .icon.smoke-alarm{
        background-image: url('./img/smoke-alarm.png');
    }

    .icon.smoke-off{
        background-image: url('./img/smoke-off.png');
    }

      .icon.th-normal{
        background-image: url('./img/th-normal.png');
    }

    .icon.th-alarm{
        background-image: url('./img/th-alarm.png');
    }

    .icon.th-off{
        background-image: url('./img/th-off.png');
    }
</style>

